<script setup lang="ts">
import { useToPage } from '@/common/use/common'

// typescript
interface IProps {
  title?: string,
  desc?: string,
  link?: string
}

const props = withDefaults(defineProps<IProps>(), {
  title: "",
  desc: "",
  link: ""
});
const { navigateTo } = useToPage();
</script>

<!-- 优惠券卡片 -->
<template>
  <view @click="navigateTo(link)" class="w-components-container coupon-card" hover-class="hover-class">
    <view class="info-view">
      <text class="title">{{ title }}</text>
      <uni-icons color="#ccc" type="right" size="18"></uni-icons>
    </view>
    <view class="desc-view">
      <text class="desc">{{ desc }}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.coupon-card {
  background-color: #fff;
  height: 120rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;

  .info-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    text {
      font-size: 28rpx;
    }
  }

  .desc-view {
    text {
      color: $uni-text-color-grey;
      font-size: 24rpx;
    }
  }
}

.hover-class {
  background-color: #f1f1f1;
}
</style>
